<template>
  <div>
    <el-button type="success" size='small' @click="routeConfig(1)" class="isisConfigClick">{{$t('路由配置')}}</el-button>
    <el-button type="danger" size='small' @click="routeConfig(2)" class="isisShowClick">{{$t('路由展示')}}</el-button>
    <el-button type="success" size='small' @click="reloadRip()" icon="el-icon-refresh" v-if="showConfig === 1" class="isisReClick">{{$t('重载配置')}}</el-button>
    <el-descriptions title="" size="small" :column='1' border contentClassName='linkConfigDescriptionsItem' labelClassName='linkConfigDescriptionsItem' style="margin-top:20px;" v-if="showConfig === 1" class="ripDescriptions">
      <el-descriptions-item :label="$t('ISIS（ipv4）协议状态')" :labelStyle="{'text-align':'left','width':'210px','line-height':'35px'}">
        <el-switch :width="lang === 'zh'?56:70" style="margin-left: 15px;" v-model="record.status" class="isisSwitch switch" active-color="#009966" inactive-color="#CCCCCC" active-value="on" inactive-value="off" @change="statusChange" :active-text="$t('开启')" :inactive-text="$t('关闭')"></el-switch>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('网络实体名称')" :labelStyle="{'text-align':'left','width':'210px','line-height':'35px'}">
        <template slot="label">{{$t('网络实体名称')}}
          <el-tooltip class="item" effect="light" placement="top">
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
            <div slot="content">
              {{$t('提示信息')}}<br />
              {{$t('正则格式为：^[a-fA-F0-9]{2}.(([a-fA-F0-9]{4}).){3,9}(00)$。如：47.0000.0000.1900.0004.00')}}<br />
              {{$t('两个防火墙名称不能一样,并且不能为空。')}}
            </div>
          </el-tooltip>
        </template>
        <el-input v-emoji v-model="record.net" style="width:500px;" ref="isisNet" size='small' @blur="netBlur"></el-input>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('ISIS协议定时器')" :labelStyle="{'text-align':'left','width':'210px','line-height':'35px'}">
        <template slot="label">{{$t('ISIS协议定时器')}}
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              {{$t('提示信息')}}<br />
              {{$t('lsp_gen:无符号整数，(1-120)，默认值5s。设置全局重新生成同一LSP的最小间隔，lsp_gen必须小于lsp_refresh')}}<br />
              {{$t('lsp_refresh:无符号整数，(1-65235)，默认值900s。设置全局LSP refresh时间间隔')}}<br />
              {{$t('max_lsp_lifetime:无符号整数，(360-65535)，默认值1200s。设置全局LSP的最大生存时间，max_lsp_lifetime必须大于等于lsp_refresh + 300')}}<br />
              {{$t('spf_interval:无符号整数，(1-120)，默认值5s。设置连续SPF计算的最小时间间隔')}}
            </div>
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
          </el-tooltip>
        </template>
        <div style="width:140px;display: inline-block;">{{$t('lsp_gen定时器')}}</div>
        <el-input v-emoji v-model="record.lsp_gen" ref="isisLspGen" style="width:200px;margin:0 40px 0 0;" size='small' @blur="timeChange('lsp_gen')"></el-input>
        <div style="width:140px;display: inline-block;">{{$t('lsp_refresh定时器')}}</div>
        <el-input v-emoji v-model="record.lsp_refresh" ref="isisLspRefresh" style="width:200px;margin:0 40px 0 0;" size='small' @blur="timeChange('lsp_refresh')"></el-input><br />
        <div style="width:140px;display: inline-block;">{{$t('max_lsp_lifetime定时器')}}</div>
        <el-input v-emoji v-model="record.max_lsp_lifetime" ref="isisMaxLspLifetime" style="width:200px;margin:10px 40px 0 0;" size='small' @blur="timeChange('max_lsp_lifetime')"></el-input>
        <div style="width:140px;display: inline-block;">{{$t('spf_interval定时器')}}</div>
        <el-input v-emoji v-model="record.spf_interval" ref="isisSpfInterval" style="width:200px;margin:10px 40px 0 0;" size='small' @blur="timeChange('spf_interval')"></el-input>
        <!-- <el-button type="success" size='small' @click="timeChange">{{$t('修改定时器')}}</el-button> -->
      </el-descriptions-item>
      <el-descriptions-item :label="$t('ISIS协议的路由器类型')" :labelStyle="{'text-align':'left','width':'210px','line-height':'35px'}">
        <template slot="label">{{$t('ISIS协议的路由器类型')}}
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              {{$t('提示信息')}}<br />
              {{$t('当两个防火墙为相同路由器类型时，防火墙1可以学到与防火墙2相连接口和防火墙2接口的路由')}}<br />
              {{$t('当两个防火墙分别为level-1-2与level-2时，配置level-1-2的防火墙仅能学到配置level-2防火墙接口的路由')}}<br />
              {{$t('当两个防火墙分别为level-1和level-2时，无法学到路由')}}
            </div>
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
          </el-tooltip>
        </template>
        <el-radio-group v-model="record.is_type" size='small' @change="isTypeChange">
          <el-radio label="level-1-only" class="level-1-only">level-1-only</el-radio>
          <el-radio label="level-1-2" class="level-1-2">level-1-2</el-radio>
          <el-radio label="level-2-only" class="level-2-only">level-2-only</el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('ISIS协议的cost类型')" :labelStyle="{'text-align':'left','width':'210px','line-height':'35px'}">
        <template slot="label">{{$t('ISIS协议的cost类型')}}
          <el-tooltip class="item" effect="light" placement="top">
            <div slot="content">
              {{$t('提示信息')}}<br />
              {{$t('narrow：使用具有窄度量的旧式TLV。')}}<br />
              {{$t('transition：转换期间发送和接受两种类型的TLV。')}}<br />
              {{$t('wide：使用新样式的TLV来承载更宽的度量。')}}<br />
              {{$t('当防火墙cost类型为narrow时，无法学到与其他设备直连的路由。')}}
            </div>
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
          </el-tooltip>
        </template>
        <el-radio-group v-model="record.metric_style" size='small' @change="metricStyleChange">
          <el-radio label="narrow" class="isisNarrow">narrow</el-radio>
          <el-radio label="transition" class="isisTransition">transition</el-radio>
          <el-radio label="wide" class="isisWide">wide</el-radio>
        </el-radio-group>
      </el-descriptions-item>
      <el-descriptions-item :label="$t('ISIS接口配置')" :labelStyle="{'text-align':'left','width':'210px','line-height':'35px'}">
        <template slot="label">{{$t('ISIS接口配置')}}
          <el-tooltip class="item" effect="light" :content="$t('提示信息:开启ISIS协议，必须对接口进行配置')" placement="top">
            <i class="el-icon-warning-outline" style="color:#666;font-size:14px;"></i>
          </el-tooltip>
        </template>
        <el-button type="success" size='small' @click="dialogVisible()" class="isisAddConfig">{{$t('新增配置')}}</el-button>
        <el-table size='small' ref="multipleConfigTable" :data="isisConfigList" tooltip-effect="dark" style="width: 100%;">
          <el-table-column prop="ifname" :label="$t('接口名称')" align='center' min-width="100"></el-table-column>
          <el-table-column prop="hello_interval" :label="$t('hello定时器')" align='center' min-width="100"></el-table-column>
          <el-table-column prop="interface_auth" :label="$t('认证方式')" align='center' min-width="100">
            <template slot-scope="scope">
              {{modeList[scope.row.mode_info.interface_auth]}}
            </template>
          </el-table-column>
          <el-table-column prop="pri" :label="$t('优先级')" align='center' min-width="100"></el-table-column>
          <el-table-column prop="right" align='center' fixed="right" :label="$t('操作')" :width="lang === 'zh'?'150':'160'">
            <template slot-scope="scope">
              <el-button type="success" plain size="mini" @click="dialogVisible(scope.row, '编辑')" :class="'isisEdit' +(scope.$index+1)">{{$t('编辑')}}</el-button>
              <el-button type="danger" plain size="mini" @click="deleteData(scope.row)" :class="'isisDel' +(scope.$index+1)">{{$t('删除')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
    </el-descriptions>
    <el-table size='small' ref="multipleTable" :data="tableList" tooltip-effect="dark" style="width: 100%;margin-top:20px;" v-if="showConfig === 2">
      <el-table-column prop="destination" :label="$t('目的地址')" align='center' min-width="200"></el-table-column>
      <el-table-column prop="next_hop" :label="$t('下一跳')" align='center' min-width="200"></el-table-column>
      <el-table-column prop="out_interface" :label="$t('出接口')" align='center' min-width="200"></el-table-column>
    </el-table>
    <isis-dialog v-if="isisDialogVisible" ref="refIsisDialogVisible"></isis-dialog>
  </div>
</template>

<script>
import IsisDialog from './IsisDialog'
import {
  getIsisStatus, // ISIS获取状态
  setIsisStatus, // ISIS设置状态
  getIsisType, // ISIS获取路由器类型
  setIsisType, // ISIS设置路由器类型
  getIsisCostType, // ISIS获取Cost类型
  setIsisCostType, // ISIS设置Cost类型
  getIsisNet, // ISIS获取网络实体名称
  setIsisNet, // ISIS设置网络实体名称
  getIsisTimers, // ISIS获取定时器
  setIsisTimers, // ISIS设置定时器
  getIsisRoute, // ISIS获取路由
  getIsisIfconfig, // ISIS获取接口配置信息
  delIsisIfconfig // ISIS删除接口配置信息
} from '@/api/network/route/dynamicRoute/ISIS'
import { reloadAgreement } from '@/api/network/route/dynamicRoute/RIP'
import { inputClass } from '@/utils/input-class.js'
export default {
  name: 'ISIS',
  components: {
    IsisDialog
  },
  data () {
    return {
      isisDialogVisible: false,
      record: {
        status: 'off',
        net: '',
        metric_style: '',
        is_type: '',
        lsp_gen: '',
        lsp_refresh: '',
        max_lsp_lifetime: '',
        spf_interval: '',
        lsp_gen_old: '',
        lsp_refresh_old: '',
        max_lsp_lifetime_old: '',
        spf_interval_old: ''
      },
      old_net: '',
      showConfig: 1,
      tableList: [],
      isisConfigList: [],
      lang: this.$i18n.locale,
      modeList: {
        'md5': 'MD5',
        'clear': this.$t('明文'),
        'off': this.$t('关闭认证')
      },
      timeRuleList: {
        'lsp_gen': {min: 1, max: 120},
        'lsp_refresh': {min: 1, max: 65235},
        'max_lsp_lifetime': {min: 360, max: 65535},
        'spf_interval': {min: 1, max: 120}
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      const data = ['isisNet', 'isisLspGen', 'isisLspRefresh', 'isisMaxLspLifetime', 'isisSpfInterval']
      inputClass(this.$refs, data)
    })
  },
  methods: {
    listData () {
      this.showConfig = 1
      getIsisStatus().then(res => {
        if (res.status === 0) {
          this.record.status = res.info[0].status
        }
      })
      getIsisNet().then(res => {
        if (res.status === 0) {
          this.record.net = res.info[0].net
          this.old_net = this.record.net
        }
      })
      getIsisType().then(res => {
        if (res.status === 0) {
          this.record.is_type = res.info[0].is_type
        }
      })
      getIsisCostType().then(res => {
        if (res.status === 0) {
          this.record.metric_style = res.info[0].metric_style
        }
      })
      getIsisTimers().then(res => {
        if (res.status === 0) {
          this.record.lsp_gen = res.info[0].lsp_gen
          this.record.lsp_refresh = res.info[0].lsp_refresh
          this.record.max_lsp_lifetime = res.info[0].max_lsp_lifetime
          this.record.spf_interval = res.info[0].spf_interval
          this.record.lsp_gen_old = res.info[0].lsp_gen
          this.record.lsp_refresh_old = res.info[0].lsp_refresh
          this.record.max_lsp_lifetime_old = res.info[0].max_lsp_lifetime
          this.record.spf_interval_old = res.info[0].spf_interval
        }
      })
      this.isisConfigListInfo()
    },
    isisConfigListInfo () {
      getIsisIfconfig().then(res => {
        if (res.status === 0) {
          this.isisConfigList = res.info
        }
      })
    },
    routeConfig (data) {
      this.showConfig = data
      if (data === 2) {
        getIsisRoute().then(res => {
          if (res.status === 0) {
            this.tableList = res.info
          }
        })
      }
    },
    // 找两个数组的不同
    arrayFind (arrA, arrB) {
      return arrA.filter(v => !arrB.includes(v))
    },
    timeChange (name) {
      if (String(this.record[name]) !== String(this.record[name + '_old'])) {
        if (String(this.record[name]).trim() !== '') {
          for (let key in this.timeRuleList) {
            if (isNaN(Number(this.record[key]))) {
              this.$messages.error(key + this.$t('定时器只能输入数字'))
              return
            } else if (!this.isInteger(this.record[key])) {
              this.$messages.error(key + this.$t('定时器只能输入整数'))
              return
            } else if (Number(this.record[key]) < this.timeRuleList[key].min || Number(this.record[key]) > this.timeRuleList[key].max) {
              this.$messages.error(key + this.$t('定时器是无效的，范围是') + this.timeRuleList[key].min + '-' + this.timeRuleList[key].max)
              return
            }
          }
        }
        setIsisTimers({ lsp_gen: this.record.lsp_gen, lsp_refresh: this.record.lsp_refresh, max_lsp_lifetime: this.record.max_lsp_lifetime, spf_interval: this.record.spf_interval }).then(res => {
          if (res.status === 0) {
            this.$messages.success(this.$t('执行成功'))
            for (let key in this.timeRuleList) {
              this.record[key + '_old'] = this.record[key]
            }
          }
        })
      }
    },
    netBlur () {
      if (this.old_net !== this.record.net) {
        setIsisNet({ net: this.record.net }).then(res => {
          if (res.status === 0) {
            this.$messages.success(this.$t('执行成功'))
            getIsisNet().then(res => {
              if (res.status === 0) {
                this.record.net = res.info[0].net
                this.old_net = this.record.net
              }
            })
          }
        })
      }
    },
    metricStyleChange () {
      setIsisCostType({ metric_style: this.record.metric_style }).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t('执行成功'))
        }
      }).catch(e => {
        getIsisCostType().then(res => {
          if (res.status === 0) {
            this.record.metric_style = res.info[0].metric_style
          }
        })
      })
    },
    isTypeChange () {
      setIsisType({ is_type: this.record.is_type }).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t('执行成功'))
        }
      }).catch(e => {
        getIsisType().then(res => {
          if (res.status === 0) {
            this.record.is_type = res.info[0].is_type
          }
        })
      })
    },
    statusChange () {
      // if (this.record.net) {
      setIsisStatus({ status: this.record.status, word: 'default' }).then(res => {
        if (res.status === 0) {
          this.$messages.success(this.$t('执行成功'))
        }
      }).catch(e => {
        getIsisStatus().then(res => {
          if (res.status === 0) {
            this.record.status = res.info[0].status
          }
        })
      })
      // } else {
      //   this.$messages.error(this.$t('网络实体名称不能为空'))
      //   getIsisStatus().then(res => {
      //     if (res.status === 0) {
      //       this.record.status = res.info[0].status
      //     }
      //   })
      // }
    },
    dialogVisible (data, type) {
      this.isisDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refIsisDialogVisible.init(data, type)
      })
    },
    deleteData (data) {
      this.$confirm(this.$t('您是否要删除所选中的数据？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        delIsisIfconfig({ ifname: data.ifname }).then(res => {
          if (res.status === 0) {
            this.$messages.success(this.$t('删除成功'))
            getIsisIfconfig().then(res => {
              if (res.status === 0) {
                this.isisConfigList = res.info
              }
            })
          }
        })
      })
    },
    reloadRip () {
      reloadAgreement({ agreement: 'isis' }).then(res => {
        if (res.status === 0) {
          this.listData()
          this.$messages.success(this.$t('重载成功'))
        }
      })
    },
    isInteger (value) {
      return (!isNaN(value) && (parseInt(value).toString().length === String(Number(value)).length))
    }
  }
}
</script>

<style lang="less" scoped>
.selectBox {
  padding: 0 20px;
}
</style>
